$(function () {
    class Activity {
        constructor() {
            this.usermsg = JSON.parse(sessionStorage.getItem("usermsg"));
            if (this.usermsg !== null) {
                  this.writeUserMsg();
            }
            this.init()
            this.initRog()
            this.initsuper()
            this.initrouter()
            this.net()
            this.machine()
            this.frivolous2()
            this.bindEvent()
        }
        bindEvent() {
            // 活动页进入购物车
            $(".activitymain").on("click", ".rush-btn", (e) => {
                let id = $(e.target).attr("data-id")
                this.go(id);
            })

            $(window).scroll((e) => {
                let scrolltop = $(document).scrollTop()
                if (scrolltop > 700) {
                    $("#fixedfield").css({
                        display: "block"
                    })
                } else {
                    $("#fixedfield").css({
                        display: "none"
                    })
                }
            }) 
          // 返回顶部
          $("#fixedfield").on("click",".grouptop",(e) => {
                $("body,html").animate(
                      {
                        scrollTop: 0
                      },
                      800
                    );
          })
        }
        writeUserMsg() {
            $(".right-login1").css({
                  display: "none"
            })
            $(".right-login2").css({
                  display: "inline-block"
            })
            $("#login-n").html(this.usermsg.username)
      }
        go(id) {
            location.href = "./details.html#id=" + id;
        }
        init() {
            let options = {
                url: "http://localhost:3000/static/data/game1.json"
            }
            axios(options)
                .then((res) => {
                    this.data = res.data
                    this.render(res.data);
                });
        }
        initRog() {
            let options = {
                url: "http://localhost:3000/static/data/electronic3.json"
            }
            axios(options)
                .then((res) => {
                    this.data = res.data
                    this.renderRog(res.data);
                });
        }
        initsuper() {
            let options = {
                url: "http://localhost:3000/static/data/super4.json"
            }
            axios(options)
                .then((res) => {
                    this.data = res.data
                    this.rendersuper(res.data);
                });
        }
        initrouter() {
            let options = {
                url: "http://localhost:3000/static/data/router.json"
            }
            axios(options)
                .then((res) => {
                    this.data = res.data
                    this.renderrouper(res.data);
                });
        }
        net() {
            let options = {
                url: "http://localhost:3000/static/data/network6.json"
            }
            axios(options)
                .then((res) => {
                    this.data = res.data
                    this.renderNet(res.data);
                });
        }
        machine() {
            let options = {
                url: "http://localhost:3000/static/data/machine.json"
            }
            axios(options)
                .then((res) => {
                    this.data = res.data
                    this.rendermachine(res.data);
                });
        }
        frivolous2() {
            let options = {
                url: "http://localhost:3000/static/data/frivolous2.json"
            }
            axios(options)
                .then((res) => {
                    this.data = res.data
                    this.renderfrivolous2(res.data);
                });
        }
        render(res) {
            var $game = res.data.map(item =>
                `<div id="addcart" >
                <div class="c-goods-item">
                    <div class="img-box">
                        <img src="${item.img_url}"
                            alt="">
                        <div class="marking-con"></div>
                    </div>
                    <div class="clear"></div>
                    <p class="g-name">${item.series}</p>
                    <p class="g-subtitle">${item.alias}</p>
                    <div class="price-row">
                        <span class="sale-price">￥${item.price}</span>
                        <span class="market-price">${item.market_price}</span>
                        <button class="rush-btn" data-id="${item.product_id}">立即抢购</button>
                    </div>
                </div>
            </div>`
            ).join("")
            $("#list1").html($game)
        }
        renderRog(res) {
            var $rog = res.data.map(item =>
                `<div id="addcart" >
                <div class="c-goods-item">
                    <div class="img-box">
                        <img src="${item.img_url}"
                            alt="">
                        <div class="marking-con"></div>
                    </div>
                    <div class="clear"></div>
                    <p class="g-name">${item.series}</p>
                    <p class="g-subtitle">${item.alias}</p>
                    <div class="price-row">
                        <span class="sale-price">￥${item.price}</span>
                        <span class="market-price">${item.market_price}</span>
                        <button class="rush-btn" data-id="${item.product_id}">立即抢购</button>
                    </div>
                </div>
            </div>`
            ).join("")
            $("#list2").html($rog)
        }

        rendersuper(res) {
            var $super = res.data.map(item =>
                `<div id="addcart" >
                <div class="c-goods-item">
                    <div class="img-box">
                        <img src="${item.img_url}"
                            alt="">
                        <div class="marking-con"></div>
                    </div>
                    <div class="clear"></div>
                    <p class="g-name">${item.series}</p>
                    <p class="g-subtitle">${item.alias}</p>
                    <div class="price-row">
                        <span class="sale-price">￥${item.price}</span>
                        <span class="market-price">${item.market_price}</span>
                        <button class="rush-btn" data-id="${item.product_id}">立即抢购</button>
                    </div>
                </div>
            </div>`
            ).join("")
            $("#list3").html($super)
        }
        renderrouper(res) {
            var $rouper = res.data.map(item =>
                `<div id="addcart" >
                <div class="c-goods-item">
                    <div class="img-box">
                        <img src="${item.img_url}"
                            alt="">
                        <div class="marking-con"></div>
                    </div>
                    <div class="clear"></div>
                    <p class="g-name">${item.series}</p>
                    <p class="g-subtitle">${item.alias}</p>
                    <div class="price-row">
                        <span class="sale-price">￥${item.price}</span>
                        <span class="market-price">${item.market_price}</span>
                        <button class="rush-btn" data-id="${item.product_id}">立即抢购</button>
                    </div>
                </div>
            </div>`
            ).join("")
            $("#list4").html($rouper)
        }
        renderNet(res) {
            var $net = res.data.map(item =>
                `<div id="addcart" >
                <div class="c-goods-item">
                    <div class="img-box">
                        <img src="${item.img_url}"
                            alt="">
                        <div class="marking-con"></div>
                    </div>
                    <div class="clear"></div>
                    <p class="g-name">${item.series}</p>
                    <p class="g-subtitle">${item.alias}</p>
                    <div class="price-row">
                        <span class="sale-price">￥${item.price}</span>
                        <span class="market-price">${item.market_price}</span>
                        <button class="rush-btn" data-id="${item.product_id}">立即抢购</button>
                    </div>
                </div>
            </div>`
            ).join("")
            $("#list5").html($net)
        }
        rendermachine(res) {
            var $machine = res.data.map(item =>
                `<div id="addcart" >
                <div class="c-goods-item">
                    <div class="img-box">
                        <img src="${item.img_url}"
                            alt="">
                        <div class="marking-con"></div>
                    </div>
                    <div class="clear"></div>
                    <p class="g-name">${item.series}</p>
                    <p class="g-subtitle">${item.alias}</p>
                    <div class="price-row">
                        <span class="sale-price">￥${item.price}</span>
                        <span class="market-price">${item.market_price}</span>
                        <button class="rush-btn" data-id="${item.product_id}">立即抢购</button>
                    </div>
                </div>
            </div>`
            ).join("")
            $("#list10").html($machine)
        }

        renderfrivolous2(res) {
            var $frivolous2 = res.data.map(item =>
                `<div id="addcart">
                <div class="c-goods-item">
                    <div class="img-box">
                        <img src="${item.img_url}"
                            alt="">
                        <div class="marking-con"></div>
                    </div>
                    <div class="clear"></div>
                    <p class="g-name">${item.series}</p>
                    <p class="g-subtitle">${item.alias}</p>
                    <div class="price-row">
                        <span class="sale-price">￥${item.price}</span>
                        <span class="market-price">${item.market_price}</span>
                        <button class="rush-btn" data-id="${item.product_id}">立即抢购</button>
                    </div>
                </div>
            </div>`
            ).join("")
            $("#list11").html($frivolous2)
        }


    }
    new Activity;
})